<template>
  <div ref="customTimeline" class="custom-timeline-simple w-100">
    <div v-for="(item, index) in list" :key="index" class="custom-timeline-simple-item">
      <div ref="leftWarp" class="leftWarp">
        <p class="big">
          {{ item[nameKey] }}
        </p>
        <div class="type">{{ item[sourceKey] }}</div>
      </div>
      <div :class="[index === list.length - 1 ? 'dot' : 'line-dot']" />
      <div class="rightWarp">
        <el-collapse :value="['1']">
          <el-collapse-item :title="item[timeKey]" name="1">
            <div style="white-space: pre-wrap" v-html="item[msgKey]" />
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <el-empty v-if="list.length === 0" description="暂无数据" />
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'

export default {
  mixins: [commonList],
  props: {
    nameKey: { type: String, default: 'name' },
    timeKey: { type: String, default: 'time' },
    sourceKey: { type: String, default: 'source' },
    msgKey: { type: String, default: 'msg' },
    list: {
      type: Array,
      default: () => [
        {
          name: '提交标准化建设申请',
          source: '企业',
          time: '2023-03-10 13:45',
          msg: '报警时间：2023-03-10 13:45\n报警参数：总氮\n报警值：75.04\n报警名称：污染因子（二类污染物）监测值超过排放许可值'
        },
        {
          name: '下发督办',
          source: '企业',
          time: '2023-03-10 13:45',
          msg: '下发时间：2023-03-10 14:45\n处置时间：2023-03-11 12:00前\n处置要求：河北长安车间废水总排口于2023-03-10 13:45发生总氮报警，报警值为75.04，报警名称为污染因子（二类污染物）监测值超过排放许可值，请企业及时核查原因并进行反馈。'
        },
        {
          name: '企业反馈',
          source: '企业',
          time: '2023-03-10 13:45',
          msg: '反馈时间：2023-03-11 09:22\n报警类型：采样点存在杂质\n报警备注：经核查，2023-03-10 13:45发生于河北长安车间废水总排口的总氮报警，报警原因为采样点存在杂志，导致采样设备采集到污泥。\n图片视频：'
        },
        {
          name: '处置超时',
          source: '企业',
          time: '2023-03-10 13:45',
          msg: '超时报警时间：2023-03-11 12:00'
        },
        {
          name: '处置信息',
          source: '企业',
          time: '2023-03-10 13:45',
          msg: '完成处置时间：2023-03-11 09:22\n处置结果：\n处置方式：\n处置预案：《河北长安关于废水在线监测超标的处置预案》.doc'
        },
        {
          name: '解除报警',
          source: '企业',
          time: '2023-03-10 13:45',
          msg: '解除时间：2023-03-11 10:15\n审批意见：'
        },
        {
          name: '报送集团',
          source: '企业',
          time: '2023-03-10 13:45',
          msg: '报送时间：2023-03-11 10:16'
        },
        {
          name: '处置质疑',
          source: '企业',
          time: '2023-03-10 13:45',
          msg: '质疑时间：2023-03-12 09:34\n反馈时间：2023-03-12 12:00前'
        },
        {
          name: '企业反馈',
          source: '企业',
          time: '2023-03-10 13:45',
          msg: '反馈时间：2023-03-11 09:22\n反馈要求：请企业重新进行处置并进行反馈。\n反馈内容：'
        }
      ]
    }
  },
  data() {
    return {
    }
  },
  created() {},
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="scss">
.el-dialog.drag-dialog.small-padding-dialog{
  width: 100% !important;
}
.render-form .dynamicPseudoAfter .el-upload-list .upload-file-list{
  height: auto;
  font-size: 14px;
  line-height:16px;
}
.custom-timeline-simple {
  padding: 15px;
  margin-bottom: 90px;
  .vform-dialog {
    .static-content-item{
      word-break: break-all;
      .fileAlert{
        display: none !important;
      }
    }
    .el-form-item__label{
      width: 100px !important;
      text-align: right;
    }
    .el-form-item__content{
      margin-left: 100px !important;
    }
  }
  .custom-timeline-simple-item {
    display: flex;
    overflow: hidden;
    .leftWarp {
      width: 180px;
      height: auto;
      flex-shrink: 0;
      border-radius: 0;
      font-weight: bold;
      text-align: right;
      .big {
        display: inline-block;
        width: 180px;
        background: #eff1f4;
        border-radius: 50px;
        //height: 40px;
        line-height: 40px;
        text-align: center;
      }
      .type{
        text-align: center;font-weight: normal;color: #999;margin-top: 3px;
      }
    }
    .line-dot {
      width: 50px;
      flex-shrink: 0;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        bottom: 0;
        width: 2px;
        background: #0084ff;
        z-index: 8;
      }
      &::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 22px;
        height: 22px;
        top: 9px;
        border-radius: 50px;
        border: 3px solid #0084ff;
        background: #fff;
        z-index: 9;
      }
      .line-dot {
        &::before {
          background: #0084ff00;
        }
      }
    }
    .dot {
      width: 50px;
      flex-shrink: 0;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 22px;
        height: 22px;
        top: 9px;
        border-radius: 50px;
        border: 3px solid #0084ff;
        background: #fff;
        z-index: 9;
      }
      .line-dot {
        &::before {
          background: #0084ff00;
        }
      }
    }
    .rightWarp {
      flex: 1;
      .el-collapse {
        border: none;
        margin-bottom: 20px;
        .el-collapse-item {
          .el-collapse-item__header,
          .el-collapse-item__wrap {
            border-bottom: none;
            border-top: none;
          }
          .el-collapse-item__header {
            height: 50px;
            line-height: 50px;
            transition: none;
            padding: 0 15px;
            color: #333;
            font-size: 0.32rem;
            background: #f3f4f7;
          }
        }
        .el-collapse-item {
          margin-bottom: 0 !important;
        }
        .el-collapse-item__content {
          font-size: 0.32rem;
          padding-bottom: 0;
          padding: 15px 15px;
          border: 1px solid #f3f4f7;
          border-radius: 5px;
        }
        .el-descriptions__body {
          color: #0a1c35;
        }
      }
    }
    &:first-child {
      .line-dot {
        &::before {
          top: 9px;
        }
      }
    }
    &:last-child {
      .el-collapse {
        margin-bottom: 0;
      }
      .line-dot {
        &::before {
          background: #f3f4f700 !important;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.vform-dialog {
  .el-upload {
    display: none !important;
  }
}
.van-nav-bar {
  background-color: #007bff !important;
  .van-nav-bar__title {
    color: white !important;
  }
  .van-nav-bar__left {
    i {
      color: white !important;
    }
  }
}
</style>
